<template v-if="!isGoOther">
  <div class="role-list">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title">
      <h2>角色管理</h2>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
    </div>

    <!-- 表格主体 -->
    <div class="role-list-content">
      <!-- 头部筛选 -->
      <div class="role-list-search">
        <div class="search-header">
          <img src="../../assets/img/search.png" alt="">
          <span>筛选查询</span>
        </div>
        <div class="search-content">
          <span>角色搜索:</span>
          <input class="dap-input" type="text" v-model="searchTitle" placeholder="输入角色编码/名称">
          <div class="search-btn">
            <span class="dap-button" @click="searchRole">查询</span>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="role-list-table">

        <div class="table-title">
          <div class="left">
            <img src="../../assets/img/user-list-icon.png" alt="">
            <span>角色列表</span>
          </div>
          <div class="right">
            <span class="dap-button" v-if="showAddRoleBtn" @click="addRole">添加</span>
          </div>
        </div>

        <div class="table-content">
          <el-table
            :data="tableData"
            v-loading="loadingShow"
            element-loading-text="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            height="10">
            <el-table-column
              prop="number"
              label="序号"
              width="60px">
            </el-table-column>
            <el-table-column
              prop="roleId"
              label="角色编号"
              align="center">
            </el-table-column>
            <el-table-column
              label="角色名称"
              align="center">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.roleName.length > 7" class="tab-item" effect="dark"
                            :content=scope.row.roleName placement="top">
                  <span>{{scope.row.abbreviationRoleName}}</span>
                </el-tooltip>
                <span v-else>{{scope.row.roleName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="roleTypeName"
              label="角色类型"
              align="center">
            </el-table-column>
            <el-table-column
              prop="createDate"
              label="添加时间"
              align="center">
            </el-table-column>
            <el-table-column
              label="是否启用"
              align="center"
              v-if="showRoleStatus">
              <template slot-scope="scope">
                <el-switch
                  @change="changeRoleStatus(scope.row)"
                  v-model=scope.row.isRun
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="250px"
              v-if="showPermissionsBtn || showEditRoleBtn || showDelRoleBtn">
              <template slot-scope="scope">
                <el-button v-if="showPermissionsBtn" @click="clickPermissions(scope.row)" type="text" size="small">
                  功能权限设置
                </el-button>
                <el-button v-if="showEditRoleBtn" @click="editRole(scope.row)" type="text" size="small">编辑</el-button>
                <el-button v-if="showDelRoleBtn" :class="{delBtn:!scope.row.isRun}" :disabled="scope.row.isRun"
                           @click="delRole(scope.row)" type="text"
                           size="small">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <dap-page :pageTotal="total" v-on:pageSizeChange="pageSizeChange" v-on:pageCurrentChange="pageCurrentChange"></dap-page>
    </div>
    <!-- 角色添加弹窗 -->
    <dap-popover ref="addRolePopup" @clickLeft="addRolePopLeftClick" :titleText="popRoleTitle">
      <div class="addRolePop-content">
        <div class="input-content">
          <span class="first-span">*</span>
          <span class="second-span">角色名称:</span>
          <input :class="{'error-input-border':showAddRoleFail} " v-model="popRoleName" type="text" maxlength="20"
                 placeholder="请输入最多20个汉字">
        </div>
        <div class="input-tip">
          <p v-show="showAddRoleFail">{{ addRoleFailMsg }}</p>
        </div>
      </div>
    </dap-popover>
    <!-- 删除角色弹窗 -->
    <dap-popover ref="delRolePopup" @clickLeft="delRolePopLeftClick">
      <div class="delRolepop">
        <p>您确定要删除{{currentRole.roleName}}角色?</p>
      </div>
    </dap-popover>
  </div>
</template>
<script>

  import dapPage from '../view/dap-page.vue';
  import dapPopover from '../view/dap-popover.vue';
  import {svgPath, quitFullScreen} from '../../assets/js/utils';
  import {
    filterLogText,
    addRoleRequest,
    delRoleRequest,
    updateIsRunRequest,
    getRoleListRequest,
    updateRoleRequest,
  } from '../../api/authority';

  export default {
    props: ['isChange', 'fullScreen', 'pageChange'],
    data () {
      return {
        isGoOther: false,
        loadingShow: true,
        svgPath: svgPath,
        canShow: true,
        searchTitle: '',
        tableData: [],
        currentPage: 1,
        pageSize: 20,
        total: 0,
        popRoleTitle: '',

        showAddRoleBtn: true,
        showRoleStatus: true,
        showPermissionsBtn: true,
        showEditRoleBtn: true,
        showDelRoleBtn: true,

        currentRole: {},
        popRoleName: '',
        showAddRoleFail: false,
        addRoleFailMsg: '', // 添加角色错误信息
        sessionUser: {}
      }
    },
    components: {
      dapPage,
      dapPopover,
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      },
      popRoleName () {
        this.showAddRoleFail = false;
      },
      pageChange () {
        this.initData();
        this.initFun();
      }
    },
    activated () {
      if (!this.$route.query.roleSet) {
        this.initFun();
      }
    },
    mounted () {
      this.initData();
      this.initFun();
    },
    methods: {
      // 取消全屏
      closeAll () {
        quitFullScreen();
      },

      initData() {
        this.isGoOther = false;
        this.loadingShow = true;
        this.canShow = true;
        this.searchTitle = '';
        this.tableData = [];
        this.currentPage = 1;
        this.pageSize = 20;
        this.total = 0;
        this.popRoleTitle = '';

        this.showAddRoleBtn = true;
        this.showRoleStatus = true;
        this.showPermissionsBtn = true;
        this.showEditRoleBtn = true;
        this.showDelRoleBtn = true;

        this.currentRole = {};
        this.popRoleName = '';
        this.showAddRoleFail = false;
        this.addRoleFailMsg = ''; // 添加角色错误信息
        this.sessionUser = {};
      },
      initFun () {
        this.searchTitle = '';
        this.sessionUser = window.sessionStorage.getItem('sessionUser');
        if (this.sessionUser) {
          this.sessionUser = JSON.parse(this.sessionUser);
        }
        let perminsStrlist = this.sessionUser.perminsStrlist;

        this.showAddRoleBtn = perminsStrlist.permission_30027;
        this.showRoleStatus = perminsStrlist.permission_30028;
        this.showPermissionsBtn = perminsStrlist.permission_30029;
        this.showEditRoleBtn = perminsStrlist.permission_30030;
        this.showDelRoleBtn = perminsStrlist.permission_30031;

        // 发送获取审核列表请求
        this.requestRoleList('', this.currentPage, this.pageSize)
      },
      // 查找角色
      searchRole () {
        this.requestRoleList(this.searchTitle, this.currentPage, this.pageSize);
      },
      // 权限点击
      clickPermissions (role) {
        // 跳转到角色编辑页面
        this.$router.push({path: 'authority-setting', query: {data: role.roleId}});
      },
      // 编辑角色
      editRole (role) {
        // 编辑角色名称
        this.popRoleTitle = '编辑角色';
        this.currentRole = role;
        this.popRoleName = role.roleName;
        this.$refs.addRolePopup.show();
      },
      // 删除角色
      delRole (role) {
        this.currentRole = role;
        this.$refs.delRolePopup.show();
      },
      delRolePopLeftClick () {
        delRoleRequest({roleId: this.currentRole.roleId})
          .then((params) => {
            if (params.code === 0) {
              this.$refs.delRolePopup.hide();
              this.searchRole();
            } else {
              this.showToast(params.message);
            }
          });
      },
      // 添加角色
      addRole (role) {
        this.showAddRoleFail = false;
        this.popRoleTitle = '添加角色';
        this.popRoleName = '';
        this.$refs.addRolePopup.show();
        this.currentRole = role;
      },
      addRolePopLeftClick () {
        if (!this.popRoleName.length) {
          this.showAddRoleFail = true;
          this.addRoleFailMsg = '角色名称不能为空';
          return;
        }
        let regPopRoleName = /^[\u4e00-\u9fa5]{1,20}$/;
        if (!regPopRoleName.test(this.popRoleName)) {
          this.showAddRoleFail = true;
          this.addRoleFailMsg = '角色名称格式不正确';
          return;
        }

        if (this.currentRole.roleId) {
          updateRoleRequest({roleId: this.currentRole.roleId, roleName: this.popRoleName})
            .then((params) => {
              if (params.code === 0) {
                this.$refs.addRolePopup.hide();
                let data = params.data;
                // 编辑角色成功
                this.searchRole();
              } else {
                this.showAddRoleFail = true;
                this.addRoleFailMsg = params.message;
              }
            });
          return;
        }

        addRoleRequest({roleName: this.popRoleName})
          .then((params) => {
            if (params.code === 0) {
              this.$refs.addRolePopup.hide();
              let data = params.data;
              // 添加角色成功
              this.searchRole();
            } else {
              this.showAddRoleFail = true;
              this.addRoleFailMsg = params.message;
            }
          });
      },
      // 发送角色列表页
      requestRoleList (searchTitle, currentPage, pageSize) {
        this.loadingShow = true;
        getRoleListRequest({searchTitle: searchTitle, pageNum: currentPage, pageSize: pageSize})
          .then((params) => {
            if (params.code === 0) {
              this.$refs.addRolePopup.hide();
              let data = params.data;

              this.total = data.total;
              this.handleRoleList(data.list);
            } else {
              this.showToast(params.message);
            }
            this.loadingShow = false;
          }).catch(() => {
          this.loadingShow = false;
        });
      },
      handleRoleList (roleList) {
        roleList.forEach((item, index) => {
          item.number = this.currentPage * this.pageSize - this.pageSize + index + 1;
          item.isRun = Boolean(item.isRun);
          if (item.roleTypeId === 1) {
            item.roleTypeName = '业务角色';
          } else if (item.roleTypeId === 0) {
            item.roleTypeName = '内置角色';
          }
          item.abbreviationRoleName = filterLogText(item.roleName);
        });

        this.tableData = roleList;
      },
      // 是否启用角色
      changeRoleStatus (role) {
        updateIsRunRequest({roleId: role.roleId, isRun: Number(role.isRun)})
          .then((params) => {
            if (params.code !== 0) {
              role.isRun = !role.isRun;
              this.showToast(params.message);
            }
          });
      },
      // 分页条数选择
      pageSizeChange (val) {
        this.pageSize = val;
        this.searchRole();
      },
      // 页数选择
      pageCurrentChange (val) {
        this.currentPage = val;
        this.searchRole();
      },
      showToast (message) {
        this.$message({
          message: message,
          center: true,
          type: 'success'
        });
      },
    },
    beforeRouteLeave (to, from, next) {
      if (to.name == 'detail') {
        this.isGoOther = false;
      } else {
        this.isGoOther = true;
      }
      next()
    }
  }
</script>
<style scoped>
  .role-list {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .role-list-content {
    margin: 30px 30px 0 30px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /*搜索*/
  .role-list-search {
    height: 130px;
  }

  .role-list-search .search-header {
    height: 60px;
    border-bottom: 1px solid #283f59;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-header > img {
    width: 18px;
    height: 18px;
    padding-left: 18px;
  }

  .role-list-search .search-header > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-search .search-content {
    height: 70px;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-content > span {
    font-size: 12px;
    padding-left: 18px;
    color: #9b9aad;
  }

  .role-list-search .search-content > input {
    margin-left: 10px;
  }

  .role-list-search .search-content .search-btn > span {
    margin-left: 42px;
  }

  /*表格*/
  .role-list-table {
    margin-top: 20px;
    background: #1b2b44;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .role-list-table .table-title {
    height: 60px;
    background: #1b2b44;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .role-list-table .table-title .left {
    display: flex;
    align-items: center;
  }

  .role-list-table .table-title .left > img {
    width: 18px;
    height: 18px;
    padding-left: 18px;
  }

  .role-list-table .table-title .left > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-table .table-title .right .dap-button {
    margin-right: 18px;
  }

  .role-list-table .table-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /* 角色弹窗 */
  .addRolePop-content {
    height: 85px;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
  }

  .addRolePop-content .input-content {
    margin-top: 30px;
    display: flex;
    align-items: center;
  }

  .addRolePop-content .input-content .first-span {
    margin-left: 30px;
    color: red;
  }

  .addRolePop-content .input-content .second-span {
    font-size: 12px;
    color: #fff;
  }

  .addRolePop-content .input-content > input {
    width: 255px;
    height: 25px;
    color: #fff;
    font-size: 14px;
    border: 1px solid #313d4f;
    background-color: #1a2940;
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 30px;
    padding-left: 5px;
  }

  .addRolePop-content .input-tip {
    line-height: 30px;
    height: 30px;
  }

  .addRolePop-content .input-tip > p {
    margin-left: 100px;
    font-size: 12px;
    color: #e7224a;
  }

  .delRolepop {
    height: 54px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 300px;
  }

  .delRolepop > p {
    margin-top: 32px;
    font-size: 14px;
    color: #fff;
  }


</style>

<!--修改框架样式-->
<style>
  .delBtn {
    color: #e7224a;
  }

  /*.delBtn:active {*/
  /*color: red;*/
  /*}*/

  .el-button.is-disabled,
  .el-button.is-disabled:focus,
  .el-button.is-disabled:hover {
    color: #666;
  }
</style>
